import type { SpColumnsType } from '@/components/SpTable/type'
import { message, Tag } from 'ant-design-vue'
import type { SysDeptListType, SysDeptWriteParamsType } from './model'
import { addDeptAPI, deleteDeptAPI, getDeptTreeAPI, updateDeptAPI } from './api'
import { addDialog } from '@/components/SpDialog/index'
import ModalForm from '../form/modal.vue'
import type { FormExpose } from 'ant-design-vue/es/form/Form'
import { formattedChildrenUndefined } from '@/utils/tree'
import type { SysUserListSelectType } from '@/views/admin/system/user/utils/model'
import { getUserSelectAPI } from '@/views/admin/system/user/utils/api'

export function useDept() {
  // 表格列
  const columns: SpColumnsType[] = [
    {
      title: '部门名称',
      dataIndex: 'deptName',
      width: 150
    },
    {
      title: '状态',
      dataIndex: 'status',
      cellRenderer: (record: SysDeptListType) => {
        if (record.status === 0) {
          return <Tag color="red">禁用</Tag>
        } else {
          return <Tag color="green">正常</Tag>
        }
      },
      width: 100,
      align: 'center'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 200,
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      align: 'center'
    }
  ]
  // 加载状态
  const loading = ref(false)
  // 部门树
  const dataList = ref<SysDeptListType[]>([])
  // 用户列表
  const userList = ref<SysUserListSelectType[]>([])
  // 弹窗框Ref
  const modalRef = ref()

  // 获取部门树
  function getDataList() {
    loading.value = true
    getDeptTreeAPI().then((res) => {
      formattedChildrenUndefined(res.data)
      dataList.value = res.data
      loading.value = false
    })
  }
  // 获取用户列表
  function getUserList() {
    getUserSelectAPI().then((res) => {
      userList.value = res.data
    })
  }

  // 打开弹窗
  function openModal(title: string, data?: SysDeptListType) {
    addDialog({
      title: `${title}部门`,
      width: '40%',
      contentRenderer: () =>
        h(ModalForm, {
          ref: modalRef,
          id: data?.id ?? 0,
          title: title,
          treeData: dataList.value ?? [],
          userList: userList.value ?? []
        }),
      beforeSure: function (done) {
        // 关闭弹窗
        function chores(title: string, name: string, done: Function) {
          message.success(`您${title}了部门名称为${name}的这条数据`)
          done()
          getDataList()
        }
        const form = modalRef.value.getRef() as FormExpose
        form.validate().then((res) => {
          const formData = res as SysDeptWriteParamsType
          if (title == '编辑') {
            updateDeptAPI(data?.id as number, formData).then(() => {
              chores(title, formData.deptName, done)
            })
          } else {
            addDeptAPI(formData).then(() => {
              chores(title, formData.deptName, done)
            })
          }
        })
      }
    })
  }

  // 删除
  const deleteData = (data: SysDeptListType) => {
    deleteDeptAPI(data.id as number).then(() => {
      message.success(`您删除了部门名称为${data.deptName}的这条数据`)
      getDataList()
    })
  }

  onMounted(() => {
    getDataList()
    getUserList()
  })

  return {
    columns,
    loading,
    dataList,
    openModal,
    deleteData
  }
}
